<template>
  <div class="warpper-box">
    <a-row>
      <a-col :span="8">
        <a-month-picker valueFormat="YYYY-MM" v-model="yearMonth" placeholder="选择月份"></a-month-picker>
        <a-button type='primary' @click="onSearch" style="margin-left: 8px;">查询</a-button>
      </a-col>
      <a-col :span="5" :offset="11">
        <a-tabs type="card" v-model="cityType" @change="cityChange">
          <a-tab-pane key="1" tab="服务费金额">
          </a-tab-pane>
          <a-tab-pane key="2" tab="结算金额">
          </a-tab-pane>
          <a-tab-pane key="3" tab="合作员工">
          </a-tab-pane>
        </a-tabs>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="16">
        <div class="mapChart" id="mainChart" :style="dHeight"></div>
      </a-col>
      <a-col :span="8">
        <div class="barChart" id="barChart" :style="dHeight"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  getCityServiceAmount,
  getCityOrderAmount,
  cityParkStaff
} from "@/api/human/report"
import china from "@/utils/json/china.json";
var geoCoordMap = {
  '重庆市': [106.5792054711914, 29.561676354946396],
  '北京市': [116.42755132275391, 39.904864261854996],
  '上海市': [121.45569327116394, 31.24958265550221],
  '天津市': [117.2097685238037, 39.13662734182628],
  '深圳市': [113.89140557678223, 22.57152012059358],
  '长沙市': [112.90652329040526, 28.31652656945587],
  '贵阳市': [106.74520290039064, 26.66515122498313],
  '成都市': [104.0737875341797, 30.69763479905076],
  '昆明市': [102.86129543945314, 24.869966752503665],
  '西安市': [108.96274578857421, 34.27885915548556],
  '郑州市': [113.6599733544922, 34.74632152530612],
  '许昌市': [113.82105081481933, 34.02045908833024],
  '合肥市': [117.31738809558105, 31.885745467321183],
  '济南市': [116.99101560055541, 36.67094660947662],
  '惠州市': [114.36281632275391, 23.091842476858815],
  '青岛市': [120.37440538406369, 36.17057416556328],
  '南京市': [118.79784766137693, 32.08729600000001],
  '长春市': [125.32485232275388, 43.911377000000016],
  '苏州市': [120.61047367724612, 31.330381785726967],
  '厦门市': [118.07447032275392, 24.636357142944526],
  '杭州市': [120.18265866137692, 30.244046592801954],
  '武汉市': [114.42484332275392, 30.60719825493056],
  '昌都市': [97.16646123797607, 31.144352917388485],
  '福州市': [119.32034881481934, 26.113544556798384],
  '漳州市': [117.71562967724608, 24.45772690308182],
  '泉州市': [118.61117609786987, 24.88502196531319],
  '广州市': [113.25838156085204, 23.148998220584627],
  '湖州市': [120.02390264550782, 30.862408422555358],
  '嘉兴市': [120.76340991534424, 30.76436149522955],
  '金华市': [119.63591799999999, 29.110726460628886],
  '绍兴市': [120.57966384655765, 30.014127160493434],
  '温州市': [120.68512208465576, 27.98010989899845],
  '宁波市': [121.5368730276947, 29.861968683309573],
  '衢州市': [118.88161615344238, 28.923076844004896],
  '台州市': [121.2888634219513, 28.685760991213225],
  '芜湖市': [118.39205533862302, 31.347704167186432],
  '扬州市': [119.3510608650818, 32.389425418631205],
  '无锡市': [120.30673203439332, 31.587928734095094],
  '呼和浩特市': [111.66546208332824, 40.831636436083166],
  '石家庄市': [114.4844344920654, 38.01062175537175],
}
var nowDate = new Date(); // 当前时间
export default {
  name: "cityChart",
  data() {
    return {
      dHeight: {
        height: "",
      },

      cityType: '1', // 城市统计切换
      yearMonth: nowDate.getFullYear() + "-" + ((nowDate.getMonth() + 1) < 10 ? '0' + (nowDate.getMonth() + 1) : (nowDate.getMonth() + 1)),
    };
  },
  methods: {
    //定义方法，获取高度减去头尾
    getHeight() {
      this.dHeight.height = window.innerHeight - 245 + "px";
    },
    // 城市切换
    cityChange() {
      this.getData();
    },
    // 获取月度城市统计数据
    async getData() {
      if (this.cityType == '1') {
        // 服务费金额
        const { code, data } = await getCityServiceAmount({ yearMonth: this.yearMonth });
        if (code === '1') {
          this.initEchart(data);
          this.initBarEchart(data);
        }
      } else if (this.cityType == '2') {
        // 结算金额
        const { code, data } = await getCityOrderAmount({ yearMonth: this.yearMonth });
        if (code === '1') {
          this.initEchart(data);
          this.initBarEchart(data);
        }
      } else {
        // 合作员工
        const { code, data } = await cityParkStaff({ yearMonth: this.yearMonth });
        if (code === '1') {
          // data.forEach(item => {
          //   item.parkStaffDtos.push({parkName: "园区Aaa", staffNum: 3},{parkName: "园区Abbb", staffNum: 6},{parkName: "园区Acccc", staffNum: 9})
          // })
          // console.log(data);
          this.initEchart(data);
          this.initBarEchart(data);
        }
      }
    },
    // 初始化echarts
    initEchart(cityData) {
      let _this = this;
      const myChart = echarts.init(document.getElementById("mainChart"));
      echarts.registerMap("china", china);
      // 处理数据返回方法
      var convertData = function (data) {
        var res = [];
        if (_this.cityType == '3') {
          data.sort((a, b) => {
            return a.staffTotalNum - b.staffTotalNum
          })
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].city];
            if (geoCoord) {
              res.push({
                name: data[i].city,
                value: geoCoord,
                parkStaffDtos: data[i].parkStaffDtos
              });
            }
          }
        } else {
          data.sort((a, b) => {
            return a.amount - b.amount
          })
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].city];
            if (geoCoord) {
              res.push({
                name: data[i].city,
                value: geoCoord,
                amount: data[i].amount
              });
            }
          }
        }
        return res;
      };
      let option = {
        backgroundColor: "rgb(99,143,200)",
        title: {
          text: this.cityType == '1' ? '服务费金额' : this.cityType == '2' ? '结算金额' : '合作员工',
          top: "10px",
          left: "center",
          textStyle: {
            color: "white",
          },
        },
        tooltip: {
          formatter: function (params) {
            if (_this.cityType == '1') {
              return '服务费金额 : ' + params.data.amount + '元';
            } else if (_this.cityType == '2') {
              return '结算金额 : ' + params.data.amount + '元';
            } else {
              let staffData = params.data.parkStaffDtos, li = "";
              staffData.forEach(item => {
                li += item.parkName + " : " + item.staffNum + "人<br>";
              })
              return li;
            }
          }
        },
        visualMap: {
          show: false,
          min: 0,
          max: 500,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            // color: ['#3B5077', '#031525'] // 蓝黑
            // color: ['#ffc0cb', '#800080'] // 红紫
            // color: ['#3C3B3F', '#605C3C'] // 黑绿
            // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
            // color: ['#23074d', '#cc5333'] // 紫红
            color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#1488CC', '#2B32B2'] // 浅蓝
          }
        },
        geo: {
          show: true,
          map: 'china',
          roam: true, // 是否开启缩放
          center: [105, 35],
          zoom: 1.5,
          label: {
            show: false,
            color: "#fff",
            emphasis: {
              show: true,
              textStyle: {
                color: '#fff',
                align: 'center',
              },
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(128, 217, 248, 1)',
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: '#15598f',
              borderWidth: 0
            }
          },
        },
        series: [
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(cityData),
            zlevel: 2
          },
          {
            name: '名称',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(cityData),
            symbolSize: function (val) {
              // return val[2] / 100;
              return 0
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true,
                color: '#fff',
              }
            },
            zlevel: 1
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 初始化echarts
    initBarEchart(cityData) {
      let _this = this, xData = [], yData = [];
      const myChart = echarts.init(document.getElementById("barChart"));
      console.log(cityData);
      // 处理数据返回方法
      if (_this.cityType == '3') {
        xData = cityData.map(item => item.city);
        yData = cityData.map(item => item.staffTotalNum);
      } else {
        xData = cityData.map(item => item.city);
        yData = cityData.map(item => item.amount);
      }
      let option = {
        backgroundColor: "rgb(99,143,200)",
        title: {
          show: false,
          text: `{a|客户数量}`,
          textStyle: {
            rich: {
              a: {
                fontSize: 16,
                fontWeight: 600,
              },
            },
          },
          top: '0%',
          left: '2%',
        },
        tooltip: {
          show: true,
          trigger: 'item',
          backgroundColor: 'rgba(255,255,255)',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#A7D6FF'
                }, {
                  offset: 0.5,
                  color: '#fff',
                }, {
                  offset: 1,
                  color: '#A7D6FF'
                }],
                global: false
              }
            },
          },
        },
        grid: {
          top: '13%',
          left: '14%',
          right: '8%',
          bottom: '12%',
        },
        xAxis: [
          {
            type: 'value',
            splitLine: { show: true },
            axisLabel: { //坐标轴刻度标签的相关设置。
              show: false,
              textStyle: {
                color: '#737373',
                fontSize: 14,
              }
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(131,101,101,1)',
                type: 'dashed',
              }
            },
            show: true,
          },
          {
            type: "value",
            nameTextStyle: {
              color: "#666666"
            },
            position: "top",
            axisLine: {
              lineStyle: {
                color: '#cdd5e2'
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#666666",
                fontSize: 14,
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            data: xData,
            axisTick: {
              show: false // 是否显示坐标轴轴线
            },
            axisLabel: {
              color: '#fff',
              fontSize: 14,
            },
            splitLine: {
              show: false
            },
            boundaryGap: true,
            axisLine: { //坐标轴轴线相关设置。
              show: true,
              inside: false,
              lineStyle: {
                color: '#fff'
              }
            }
          },
        ],
        series: [
          {
            name: _this.cityType == '1' ? '服务费金额' : _this.cityType == '2' ? '结算金额' : '合作员工',
            type: 'bar',
            barMaxWidth: '20%',
            zlevel: 10,
            // barGap: '100%',
            data: yData,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: '#37A2DA'
                  }, {
                    offset: 1,
                    color: '#A7D6FF'
                  }]
                },
                barBorderRadius: [0, 30, 30, 0],
                label: {
                  show: true, //开启显示
                  position: 'right', //在上方显示
                  textStyle: {
                    //数值样式
                    color: '#f6f6f6',
                    fontSize: 12,
                    fontWeight: 400,
                  },
                },
              }
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 搜索
    onSearch() {
      this.getData();
    },
  },
  created() {
    //页面创建时执行一次getHeight进行赋值，顺道绑定resize事件
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  activated() {
    this.getData();
  },
};
</script>

<style>
.mapChart {
  overflow: hidden;
  /* border-right: 1px solid rgba(0,0,0,.25); */
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.barChart {
  overflow: hidden;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}</style>
